<template>
  <div class="check_account">
    <!-- 页面主体 -->
    <v-main>
      <div class="page_name">
        <span class="title">查看账号</span>
      </div>
      <div class="role_info">
        <div class="role_prop">
          <span class="prop_name">账号:</span>
          <span>{{ accountInfo && accountInfo.username !== null && accountInfo.username !== undefined ? accountInfo.username : '暂无数据'}}</span>
        </div>
        <div class="role_prop">
          <span class="prop_name">员工姓名:</span>
          <span>{{ accountInfo && accountInfo.staff_name !== null && accountInfo.staff_name !== undefined ? accountInfo.staff_name : '暂无数据'}}</span>
        </div>
        <div class="role_prop">
          <span class="prop_name">联系方式:</span>
          <span>{{ accountInfo && accountInfo.phone !== null && accountInfo.phone !== undefined ? accountInfo.phone : '暂无数据' }}</span>
        </div>
        <div class="role_prop">
          <span class="prop_name">创建人:</span>
          <span>{{ accountInfo && accountInfo.parent_name !== null && accountInfo.parent_name !== undefined && accountInfo.parent_name !== '' ? accountInfo.parent_name : '-' }}</span>
        </div>
        <div class="role_prop">
          <span class="prop_name">角色:</span>
          <span>{{ accountInfo && accountInfo.role_names && accountInfo.role_names[0].name !== null && accountInfo.role_names[0].name !== undefined ? accountInfo.role_names[0].name : '暂无数据' }}</span>
        </div>
        <div class="role_prop">
          <span class="prop_name">角色描述:</span>
          <span>{{ accountInfo && accountInfo.role_names && accountInfo.role_names[0].desc !== null && accountInfo.role_names[0].desc !== undefined ? accountInfo.role_names[0].desc : '暂无数据' }}</span>
        </div>
        <div class="role_prop">
          <span class="prop_name">创建时间:</span>
          <span>{{ accountInfo && accountInfo.created_at !== null && accountInfo.created_at !== undefined ? accountInfo.created_at : '暂无数据'}}</span>
        </div>
        <div class="role_prop">
          <el-button size="mini" @click="navToAccount">返回</el-button>
        </div>
      </div>
    </v-main>
  </div>
</template>
<script type="text/ecmascript-6">
// components
import MainComp from '@/components/main'

// element-ui
import { Button } from 'element-ui'
// API
import { APICheckAccount } from '@/api/settings.js'

export default {
  name: 'CheckAccount',

  components: {
    // elementUI component
    elButton: Button,
    // 项目自定义组件
    vMain: MainComp
  },

  created () {
    // init request
    this.userid = this.$route.query.userid
    this.tabName = this.$route.query.tabName
    this.APICheckAccount(this.userid)
  },

  data () {
    return {
      tabName: null,
      userid: null,
      accountInfo: null
    }
  },

  methods: {
    navToAccount () {
      this.$router.push({
        name: 'Settings',
        query: {
          tabName: this.tabName
        }
      })
    },
    // ======= API ==================
    APICheckAccount (userid) {
      APICheckAccount({ userid })
        .then((res) => {
          this.accountInfo = res.data.user
        })
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less">
  // scoped
  .check_account {
    box-sizing: border-box;
    padding: 20px;
    width: 100;
    background-color: #FFF;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2);
    .page_name {
      margin-bottom: 20px;
      .title{
        font-weight: bold;
        font-size: 18px;
      }
    }
    .role_info {
      .role_prop:not(:last-child) {
        margin-bottom: 20px;
        .prop_name {
          display: inline-block;
          width: 80px;
          height: 26px;
          margin-right: 10px;
          line-height: 26px;
          text-align: left;
        }
        .required{
          float: left;
        }
        .required::before{
          content: '*';
          color: #f56c6c;
          margin-right: 4px;
        }
        .right_tree{
          display: inline-block;
          width: 300px;
          padding: 10px;
          border: 1px solid #dcdfe6;
          border-radius: 6px;
        }
      }
    }
  }
</style>
